body {
    font-family: Arial;  background:url('https://images.unsplash.com/photo-1414058833071-c406ac889d15?ixlib=rb-0.3.5&q=50&fm=jpg&crop=entropy&s=8103f30e74242bccd27b4887ed0e9c14')  center  ;
    background-repeat:no-repeat;

}
.cont_modal:hover {
    box-shadow:1px 1px 1000px 1000px rgba(0,0,0,0.1),1px 16px 25px -2px rgba(0,0,0,0.4);
}

.cont_modal {
    transition: all 0.2s;
    -webkit-transition: all 0.2s;
    box-shadow:1px 1px 1000px 1000px rgba(0,0,0,0.25), 1px 16px 25px -2px rgba(0,0,0,0.5);
    background: #8e719b; /* Old browsers */
    background: -moz-linear-gradient(135deg, rgba(206,153,255,0.8) 0%,rgba(187,153,255,0.8) 51%,rgba(14,144,255,0.8) 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(135deg, rgba(206,153,255,0.8) 0%,rgba(187,153,255,0.8) 51%,rgba(14,144,255,0.8) 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(135deg, rgba(206,153,255,0.8) 0%,rgba(187,153,255,0.8) 51%,rgba(14,144,255,0.8) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#8e719b', endColorstr='#247592',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
    position:absolute;
    left:50%;
    top:50%;
    width:700px;
    height: 400px;
    margin-left:-350px;
    margin-top:-200px;
}

.cont_text_detalles {
    margin:50px;
    color:#fff;
}

.cont_menu_ico {
    position:relative;
    float:right;
}

.cont_menu_ico > a {
    color:#fff;
}

.cont_text_info{
    position:relative;
    float:left;
    width:300px;
}
.cont_modal > .cont_text_detalles > .cont_text_info > h1,.cont_modal > .cont_text_detalles > .cont_text_info > p {
    -webkit-transform: translate(-25px);
    -ms-transform: translate(-25px);
    -o-transform: translate(-25px);
    transform: translate(-25px);
    opacity:0;
    -webkit-transition: all 0.5s;
    -o-transition: all 0.5s;
    transition: all 0.5s;
    -webkit-transition-delay: 0.5s;
    -moz-transition-delay: 0.5s;
    -ms-transition-delay: 0.5s;
    -o-transition-delay: 0.5s;
    transition-delay: 0.5s;

}

.cont_text_info > h1 {
    font-family: Arial;
}


.btn_shared {
    background-color:#FF4489;
    color:#fff;
    text-decoration:none;
    padding:10px;
    display:block;
    width:70px;
    font-size:14px;
    font-weight:800;
    text-align:center;
    border-radius:20px;
    box-shadow: 1px 0px 15px 2px
    rgba(255, 121, 170,0.7);
    -webkit-transition: all 0.5s;
    -o-transition: all 0.5s;
    transition: all 0.5s;
    -webkit-transition-delay: 0.6s;
    -moz-transition-delay: 0.6s;
    -ms-transition-delay: 0.6s;
    -o-transition-delay: 0.6s;
    transition-delay: 0.6s;
}

.cont_list_tiempo{
    position:absolute;
    right:30px;
    bottom:30px;
    width:355px;
}
.cont_list_tiempo > ul{
    margin:0;
    padding:0;
}
.cont_list_tiempo > ul > li {
    list-style:none;
    position:relative;
    bottom:0px;
    float:left;
    width:23%;
    margin:1%;
}

.cont_porct_1 {
    background-color: rgba(31, 220, 255, 0.8);
    height: 80px;
    position: relative;
    box-shadow: 1px 1px 15px 2px rgba(118,218,255,0.5);
    top:70px;
    -webkit-transform: translate(0,-25px);
    -ms-transform: translate(0,-25px);
    -o-transform: translate(0,-25px);
    transform: translate(0,-25px);
    opacity:0;
    -webkit-transition: all 0.5s;
    -o-transition: all 0.5s;
    transition: all 0.5s;
    -webkit-transition-delay: 0.7s;
    -moz-transition-delay: 0.7s;
    -ms-transition-delay: 0.7s;
    -o-transition-delay: 0.7s;
    transition-delay: 0.7s;

}
.cont_porct_1 > p {
    font-family: 'Rubik', sans-serif;
    font-weight:100;
    text-align:center;
    margin:0px auto;
    padding:0p;
    font-size:42px;
}
.cont_porct_1 > span {
    text-align: center;
    margin: 0px auto;
    width: 100%;
    position: relative;
    float: left;
    font-size:14px;
    font-weight:800;

}

.cont_porct_2 {
    background-color:rgba(255, 135, 220, 0.8);
    height: 100px;
    position:relative;
    top:50px;
    box-shadow: 1px 1px 15px 1px rgba(255, 135, 220, 0.5);
    -webkit-transform: translate(0,-25px);
    -ms-transform: translate(0,-25px);
    -o-transform: translate(0,-25px);
    transform: translate(0,-25px);
    opacity:0;
    -webkit-transition: all 0.5s;
    -o-transition: all 0.5s;
    transition: all 0.5s;
    -webkit-transition-delay: 0.9s;
    -moz-transition-delay: 0.9s;
    -ms-transition-delay: 0.9s;
    -o-transition-delay: 0.9s;
    transition-delay: 0.9s;

}
.cont_porct_3{
    background-color:rgba(24, 241, 200, 0.9);
    height: 150px;
    box-shadow: 1px 1px 15px 1px rgba(24, 241, 200, 0.5);
    -webkit-transform: translate(0,-25px);
    -ms-transform: translate(0,-25px);
    -o-transform: translate(0,-25px);
    transform: translate(0,-25px);
    opacity:0;
    -webkit-transition: all 0.5s;
    -o-transition: all 0.5s;
    transition: all 0.5s;
    -webkit-transition-delay: 1.1s;
    -moz-transition-delay: 1.1s;
    -ms-transition-delay: 1.1s;
    -o-transition-delay: 1.1s;
    transition-delay: 1.1s;
}
.cont_porct_4 {
    background-color:rgba(253, 168, 84, 0.8);
    height: 90px;
    position:relative;
    top:60px;
    box-shadow: 1px 1px 15px 1px rgba(253, 168, 84, 0.5);
    -webkit-transform: translate(0,-25px);
    -ms-transform: translate(0,-25px);
    -o-transform: translate(0,-25px);
    transform: translate(0,-25px);
    opacity:0;
    -webkit-transition: all 0.5s;
    -o-transition: all 0.5s;
    transition: all 0.5s;
    -webkit-transition-delay: 1.3s;
    -moz-transition-delay: 1.3s;
    -ms-transition-delay: 1.3s;
    -o-transition-delay: 1.3s;
    transition-delay: 1.3s;
}



.cont_porct_2 > p {
    font-family: 'Rubik', sans-serif;
    font-weight:100;
    text-align:center;
    margin:0px auto;
    padding:0p;
    padding-top:20px;
    font-size:42px;
}
.cont_porct_2 > span {
    text-align: center;
    margin: 0px auto;
    width: 100%;
    position: relative;
    float: left;
    font-size:14px;
    font-weight:800;

}

.cont_porct_3 > p {
    font-family: 'Rubik', sans-serif;
    font-weight:100;
    text-align:center;
    margin:0px auto;
    padding:0p;
    padding-top:70px;
    font-size:42px;
}
.cont_porct_3 > span {
    text-align: center;
    margin: 0px auto;
    width: 100%;
    position: relative;
    float: left;
    font-size:14px;
    font-weight:800;

}

.cont_porct_4 > p {
    font-family: 'Rubik', sans-serif;
    font-weight:100;
    text-align:center;
    margin:0px auto;
    padding:0p;
    padding-top:10px;
    font-size:42px;
}
.cont_porct_4 > span {
    text-align: center;
    margin: 0px auto;
    width: 100%;
    font-size:14px;
    font-weight:800;
    position: relative;
    float: left;
}

.cont_modal {
    -webkit-transform: scale(0);
    -ms-transform: scale(0);
    -o-transform: scale(0);
    transform: scale(0);
}
.btn_shared {
    -webkit-transform: scale(0);
    -ms-transform: scale(0);
    -o-transform: scale(0);
    transform: scale(0);
}

.cont_modal_active > .cont_text_detalles > .cont_text_info > .btn_shared {
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
}

.cont_modal_active {
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
}

.cont_modal_active > .cont_text_detalles > .cont_text_info > h1,.cont_modal_active > .cont_text_detalles > .cont_text_info > p {
    -webkit-transform: translate(0px);
    -ms-transform: translate(0px);
    -o-transform: translate(0px);
    transform: translate(0px);
    opacity:1;

}


.cont_modal_active > .cont_text_detalles > .cont_list_tiempo  > ul > li > .cont_porct_1 ,
.cont_modal_active > .cont_text_detalles > .cont_list_tiempo  > ul > li > .cont_porct_2 ,
.cont_modal_active > .cont_text_detalles > .cont_list_tiempo  > ul > li > .cont_porct_3 ,
.cont_modal_active > .cont_text_detalles > .cont_list_tiempo  > ul > li > .cont_porct_4
{
    -webkit-transform: translate(0px);
    -ms-transform: translate(0px);
    -o-transform: translate(0px);
    transform: translate(0px);
    opacity:1;
}
